﻿<h4>Default</h4>
<FluentTextArea @bind-Value=value1 Appearance="FluentInputAppearance.Filled"></FluentTextArea>
<FluentTextArea @bind-Value=value2 Appearance="FluentInputAppearance.Filled">
    <span>label</span>
</FluentTextArea>

<h4>Placeholder</h4>
<FluentTextArea @bind-Value=value3 Appearance="FluentInputAppearance.Filled" Placeholder="Placeholder"></FluentTextArea>

<!-- Required -->
<h4>Required</h4>
<FluentTextArea @bind-Value=value4 Appearance="FluentInputAppearance.Filled" Required="true"></FluentTextArea>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextArea @bind-Value=value5 Appearance="FluentInputAppearance.Filled" Disabled="true"></FluentTextArea>
<FluentTextArea @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true">
    <span>label</span>
</FluentTextArea>
<FluentTextArea @bind-Value=value7 Appearance="FluentInputAppearance.Filled" Disabled="true" Placeholder="placeholder"></FluentTextArea>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextArea @bind-Value=value8 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
<FluentTextArea @bind-Value=value9 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
@code {
    string? value1, value2, value3, value4, value5, value6, value7, value8="Read only text area", value9 = "Read only text area";
}